<template>
    <div class='box' id='app213' style="color:red">
        <!-- template中只能有一个根元素 -->
        <h1>{{name}}</h1>
        <input type="text" v-model='name'>
        <button @click='fn'>阿牛</button>
        <myA v-if='name' qqq='123' :myname='name' ></myA>
        <my-a www='234' :myname='name'></my-a>
        <myB eee='789' :myname='name' @qqq='fn'></myB>
    </div>
</template>
<script>
// @ is an alias to /src
// 在 vue 中  每一个组件都是 vue的一个实例
// 父子组件  A组件使用了B组件 那么A组件就是父组件 B组件就是子组件
// 父传子 行内自定义属性; 子组件通过 props接收; 子组件不能直接修改props
// 子传父  自定义事件传递函数， 子组件通过$emit触发事件 一传参的方式把数据给父组件
// 双向数据绑定 单项数据流（默认的数据流只能从上向下流）
import a from './a'
import b from './dom更新异步'

console.log(111,a,b)
export default {
    // name: 'XXX', // 组件名字
    data() {
        // 工程化 .vue文件中的data为什么必须是一个函数？？
        // 为了保证数据的独立性；在组件复用的同时保证数据的独立
        return {
          name:'珠峰'
        }
    },
    components:{
      myA:a,
      "my-a":a,
      myB:b
    },
    methods: {
      fn(name){
        // console.log(this)
        // this.name = null;
        console.log(arguments)
        this.name = name
      },
      getdata(){

      }
    },
    // data:{
    //   name:"珠峰"
    // },
    beforeCreate() {
      // 这里是获取不到 data methods computed  里边的属性
      console.log('beforeCreate')
    },
    created() {
      // 这里是第一个可以获取 data methods computed  里边的属性的钩子函数
      // 一般会做一些初始化的操作
      console.log('created')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      // DOM 渲染完成之后 会触发这个函数
      // 这个钩子函数当中我们是可以直接获取真实DOM
      console.log('mounted')
    },
    // 更新的钩子函数 updated这个函数中 不要编写触发触发试图更新的操作

    // 销毁的钩子函数 一般用来清除自己绑定的事件  还可以清除定时器
}
</script>
<style lang="less">

</style>